import React, { useState, useEffect } from "react";
import styles from "./index.module.less";
import Nav from "@pages/nav";
import { useNavigate } from "react-router-dom";
import { connect } from "react-redux";
import { openLoginAction } from "@redux/actions";
import profile from "@depjs/profile";
import toast from "@utils/showToast";
import PortalContainer from "@components/portalContainer";
import QuestionShow from "@components/questionShow";
import { request } from "@apis/request";
import NoData from "@components/nodata";

const headOptions = [
    "全部问题",
    "未解决",
    "已解决",
    "我发布的",
    "我回答的",
    "我关注的",
];

const Questions = (props) => {
    const { openLoginAction } = props;

    const navigate = useNavigate();
    const [activeKey, setActiveKey] = useState(0);
    const [isLogin, setIsLogin] = useState(undefined);
    const [list, setList] = useState(undefined);

    const handlePublish = () => {
        if (isLogin) {
            navigate("/publish");
        } else {
            toast.info("请先登录，再发布问题~");
            openLoginAction(true);
        }
    };

    const getQuestions = async (type) => {
        const res = await request("/questions/receive", { type });
        console.log("res: ", res);
        if (res.code === "0000") {
            setList(res.data);
        } else {
            setList([]);
        }
    };

    useEffect(() => {
        profile.ready(() => {
            setIsLogin(profile.isLogin);
        });
        getQuestions(1);
    }, []);

    return (
        <div className={styles.questions}>
            <Nav />
            <div className={styles.questions_wrap}>
                <div className={styles.questions_head}>
                    <ul className={styles.head_ul}>
                        {headOptions.map((item, index) => {
                            return (
                                <li
                                    key={index}
                                    className={`${
                                        index === 0 ? styles.large : ""
                                    } ${
                                        activeKey === index ? styles.active : ""
                                    }`}
                                    onClick={() => {
                                        setActiveKey(index);
                                        if (index < 3) {
                                            getQuestions(index + 1);
                                        } else {
                                            if (isLogin) {
                                                getQuestions(index + 1);
                                            } else {
                                                openLoginAction(true);
                                                toast.info(
                                                    "登录后查看个人数据"
                                                );
                                            }
                                        }
                                    }}
                                >
                                    {item}
                                </li>
                            );
                        })}
                    </ul>
                    <div
                        className={styles.go_questions_btn}
                        onClick={handlePublish}
                    >
                        发布问题
                    </div>
                </div>
                <div className={styles.questions_main}>
                    <ul className={styles.main_ul}>
                        {list === undefined ? (
                            <div>loading...</div>
                        ) : list.length > 0 ? (
                            list.map((item, index) => {
                                return (
                                    <li
                                        key={index}
                                        onClick={() => {
                                            navigate(
                                                `/questions/${item.questionId}`
                                            );
                                        }}
                                    >
                                        <QuestionShow
                                            title={item.title}
                                            cateTags={item.cateTags}
                                            isResolved={item.isResolved}
                                            publishDate={item.publishDate}
                                            numbers={item.answers.length}
                                            focusNames={item.focusNames}
                                            rewardGmoney={item.rewardGmoney}
                                            isShowTag={
                                                !(
                                                    activeKey === 1 ||
                                                    activeKey === 2
                                                )
                                            }
                                        />
                                    </li>
                                );
                            })
                        ) : (
                            <NoData />
                        )}
                    </ul>
                </div>
                {list && list.length > 0 ? (
                    <p className={styles.total_nums}>
                        --------- 共计{list.length}条问题 ---------
                    </p>
                ) : null}
            </div>
            <PortalContainer />
        </div>
    );
};

export default connect(
    (state) => ({
        isOpenLoginer: state.openLoginReducer,
    }),
    { openLoginAction }
)(Questions);
